<template>
  <div id="main3"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: ['data'],
  data() {
    return {}
  },
  mounted() {

  },
  methods: {
    initEcharts(data, labels) {
      const one = [], two = [], three = [], four = []
      data.forEach(item => {
        // one.push(item['one'] === 0 ? 0 : (item['one'] / item.total * 100).toFixed(3))
        // two.push(item['two'] === 0 ? 0 : (item['two'] / item.total * 100).toFixed(3))
        // three.push(item['three'] === 0 ? 0 : (item['three'] / item.total * 100).toFixed(3))
        // four.push(item['four'] === 0 ? 0 : (item['four'] / item.total * 100).toFixed(3))
        one.push(item['one'])
        two.push(item['two'])
        three.push(item['three'])
        four.push(item['four'])
      })
      const chartDom = document.getElementById('main3')
      const myChart = echarts.init(chartDom)
      let option

      option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['0-1天', '1-2天', '2-3天', '3-4天']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          // feature: {
          //   saveAsImage: {}
          // }
        },
        xAxis: {
          type: 'category',
          data: labels,
        },
        yAxis: {
          type: 'value',
          name: "单位（%）",
          nameTextStyle: {
            color: "#aaa",
            nameLocation: "start",
          },
        },
        series: [
          {
            name: '0-1天',
            type: 'line',
            data: one
          },
          {
            name: '1-2天',
            type: 'line',
            data: two
          },
          {
            name: '2-3天',
            type: 'line',
            data: three
          },
          {
            name: '3-4天',
            type: 'line',
            data: four
          }
        ]
      };

      option && myChart.setOption(option);
    }
  },
  watch: {
    data({ data, labels }) {
      this.initEcharts(data, labels)
    }
  }
}
</script>

<style scoped>
#main3 {
  width: 100%;
  height: 300px;
}
</style>
